import React from 'react';
import TweenOne from 'rc-tween-one';
import { Menu,Row,Col,Select,Input,Button } from 'antd';
import { getChildrenToRender } from './utils';
import QueueAnim from 'rc-queue-anim';
import Texty from 'rc-texty';
import 'rc-texty/assets/index.css';

const { Item, SubMenu } = Menu;
const { Option } = Select;
const items = [
  {
    label: '网站首页',
    key: '网站首页',
  },
  {
    label: '集团介绍',
    key: '集团介绍',
    children: [
      {
        label: '集团简介',
        key: '集团简介',
      },
      {
        label: '公司历程',
        key: '公司历程',
      },
      {
        label: '组织机构',
        key: '组织机构',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      }
    ],
  },
  {
    label: '公司资质',
    key: '公司资质',
    children: [
      {
        label: '集团简介',
        key: '集团简介',
      },
      {
        label: '公司历程',
        key: '公司历程',
      }
    ],
  },
  {
    label: '新闻中心',
    key: '新闻中心',
  },
  {
    label: '厂区及设备',
    key: '厂区及设备',
    children: [
      {
        label: '集团简介',
        key: '集团简介',
      },
      {
        label: '公司历程',
        key: '公司历程',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      }
    ],
  },
  {
    label: '产品信息',
    key: '产品信息',
    children: [
      {
        label: '集团简介',
        key: '集团简介',
      },
      {
        label: '公司历程',
        key: '公司历程',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      }
    ],
  },
  {
    label: '技术中心',
    key: '技术中心',
    children: [
      {
        label: '集团简介',
        key: '集团简介',
      },
      {
        label: '公司历程',
        key: '公司历程',
      },
      {
        label: '组织机构',
        key: '组织机构',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      },
      {
        label: '组织机构',
        key: '组织机构',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      }
    ],
  },
  {
    label: '合作案例',
    key: '合作案例',
    children: [
      {
        label: '集团简介',
        key: '集团简介',
      },
      {
        label: '公司历程',
        key: '公司历程',
      },
      {
        label: '组织机构',
        key: '组织机构',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      },
      {
        label: '组织机构',
        key: '组织机构',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      }
    ],
  },
  {
    label: '客服中心',
    key: '客服中心',
    children: [
      {
        label: '集团简介',
        key: '集团简介',
      },
      {
        label: '公司历程',
        key: '公司历程',
      },
      {
        label: '组织机构',
        key: '组织机构',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      }
    ],
  },
  {
    label: '人力资源',
    key: '人力资源',
    children: [
      {
        label: '集团简介',
        key: '集团简介',
      },
      {
        label: '公司历程',
        key: '公司历程',
      },
      {
        label: '组织机构',
        key: '组织机构',
      },
      {
        label: '资质荣誉',
        key: '资质荣誉',
      }
    ],
  },
];
const selectAfter = (
  <Select style={{width:"100px"}} defaultValue="全站">
    <Option value="全站">全站</Option>
    <Option value="企业视频">企业视频</Option>
  </Select>
);
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneOpen: undefined,
      active:'网站首页'
    };
  }

  phoneClick = () => {
    const phoneOpen = !this.state.phoneOpen;
    this.setState({
      phoneOpen,
    });
  };

  moseLeave = ()=>{
    return
    let newArr =JSON.parse(JSON.stringify( this.props.dataSource.Menu.children))
    document.querySelectorAll('.ant-menu-submenu')
    newArr.map(item=>{
      item.subItem = []
    })
    this.setState({
      navChildrenCopy:newArr
    })
  }

  render() {
    const { dataSource, isMobile, ...props } = this.props;
    const { phoneOpen } = this.state;

    const moment = phoneOpen === undefined ? 300 : null;
    return (
      <div style={{position:"sticky",top: 0,zIndex: 3,backgroundColor:'rgba(255, 255, 255, 0.9)'}}>
          <Row style={{padding:" 5px 0",maxWidth: "1250px",margin: "0 auto"}}>
            <Col style={{fontSize:"14px",fontWeight: "400",lineHeight: "32px"}} span={12}>
            <div className="texty-demo">
    <Texty duration={200} mode= 'smooth' type= 'left'>欢迎光临盛亚集团官网！  服务热线：0734-8998919</Texty>
  </div>
            
            </Col>
            <Col span={12} style={{textAlign: "end"}}><Input style={{width:"50%"}} addonAfter={selectAfter} placeholder="请输入搜索内容" /></Col>
          </Row>
      <TweenOne
        component="header"
        animation={{ opacity: 0, type: 'from' }}
        {...dataSource.wrapper}
        {...props}
      >
        <div
          {...dataSource.page}
          className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
        >
          <TweenOne
            animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
            {...dataSource.logo}
          >
            <img width="100%" src={require("../assets/logo.png")} alt="img" />
          </TweenOne>
          {isMobile && (
            <div
              {...dataSource.mobileMenu}
              onClick={() => {
                this.phoneClick();
              }}
            >
              <em />
              <em />
              <em />
            </div>
          )}
          <TweenOne
            {...dataSource.Menu}
            animation={
              isMobile
                ? { x: -30, type: 'from', ease: 'easeOutQuad' }
                : null
            }
            moment={moment}
            reverse={!!phoneOpen}
          >
            {/* <Menu
              mode={isMobile ? 'inline' : 'horizontal'}
              defaultSelectedKeys={['item0']}
            >
              {navChildren}
            </Menu> */}
            {/* <Menu onClick={(e)=>{
              this.setState({
                active:e.key
              })
            }} selectedKeys={[this.state.active]} mode="horizontal" items={items} /> */}
            <div className='content' key={'navContent'}>
              {items.map(item=>{
                return  <div className='navItem' key={item.key}>
                          {item.label}
                          {item.children?item.children.map((i,index)=>{
                            return <div className='navItems' key={item.key+'-'+i.key+'-'+index}>{i.label}</div>
                          }):''}
                        </div>
              })}
            </div>
          </TweenOne>
        </div>
      </TweenOne>
      </div>
    );
  }
}

export default Header;
